<template>
	<view class="gotOut">
		<view class="tab dis">
			<view class="tabItem" :class="tabId == 0 ? 'avtive' : ''" @click="changeTab(0)">
				<view class="tabName">论坛/跑腿敏感词</view>
			</view>
			<view class="tabItem" :class="tabId == 1 ? 'avtive' : ''" @click="changeTab(1)">
				<view class="tabName">群推送敏感词</view>
			</view>
		</view>
		<view class="list" v-if="list.length > 0">
			<view class="item dis p20" v-for="item in list" :key="item.id">
				<view class="itemL ellipsis">{{ item.word }}</view>
				<view class="itemR">
					<view class="delBut" @click="open(item)">删除</view>
				</view>
			</view>
			<view class="noData">没有更多数据了</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
		<view class="endBut dis p30">
			<view class="but nodeBut" @click="goBack">返回</view>
			<view class="but custom_btn" @click="open('')">添加</view>
		</view>
	</view>
	<up-modal :title="modalTit" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
		<view class="slot_content" v-if="!isDel.word">
			<up-input :placeholder="placeholder" border="surround" v-model="plateName"></up-input>
		</view>
		<view class="a" v-else>确定删除"{{ isDel.word }}"</view>
		<template #confirmButton>
			<view class="modalBut dis">
				<view class="custom_btn nodeBut" @click="okDel">取消</view>
				<view class="custom_btn" @click="okAdd">确定</view>
			</view>
		</template>
	</up-modal>
</template>

<script setup>
import { riskWords, delRisk, addRisk } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	schoolId.value = options.schoolId;
	getList();
});
// 返回
const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
};
// 新增
const isDel = ref({});
const modalTit = ref('添加风险词');
const placeholder = ref('请填写风险词');
const plateName = ref('');
const showModal = ref(false);
const okAdd = async () => {
	if (isDel.value?.id) {
		delItem(isDel.value.id);
	} else {
		addFun();
	}
};
const addFun = async () => {
	if (!plateName.value) {
		uni.showToast({
			title: '请填写风险词',
			icon: 'none'
		});
		return;
	}
	const data = {
		word: plateName.value,
		departmentId: '2',
		type: tabId.value == 0 ? 'forum' : 'wechat'
	};
	const res = await addRisk(schoolId.value, data);
	if (res.code == 0) {
		showModal.value = false;
		plateName.value = '';
		getList();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};
const okDel = () => {
	showModal.value = false;
	plateName.value = '';
	modalTit.value = '添加风险词';
	placeholder.value = '请填写风险词';
	isDel.value = {};
};
const open = (item) => {
	if (item?.id) {
		modalTit.value = '警告';
		isDel.value = item;
		plateName.value = '';
	} else {
		modalTit.value = '添加风险词';
		placeholder.value = '请填写风险词';
		plateName.value = '';
	}
	showModal.value = true;
};

const delItem = async (id) => {
	const res = await delRisk(id);
	if (res.code == 0) {
		showModal.value = false;
		plateName.value = '';
		modalTit.value = '添加风险词';
		placeholder.value = '请填写风险词';
		isDel.value = {};
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
		getList();
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};
const list = ref([]);
const getList = async () => {
	const data = {
		type: tabId.value == 0 ? 'forum' : 'wechat'
	};
	const res = await riskWords(schoolId.value, data);
	// console.log(res);
	if (res.code == 0) {
		list.value = res.data.list;
	}
};

const tabId = ref(0);
const changeTab = (num) => {
	list.value = [];
	tabId.value = num;
	getList();
};
</script>

<style scoped lang="scss">
.gotOut {
	padding-bottom: 135rpx;
	width: 100%;
	.tab {
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		background-color: #fff;
		.tabItem {
			// width: 120rpx;
			text-align: center;
			color: #656565;
		}
		.avtive {
			position: relative;
			color: #000;
			font-weight: 700;
			font-size: 30rpx;
		}
		.avtive::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			display: block;
			content: '';
			width: 45rpx;
			height: 8rpx;
			border-radius: 8rpx;
			background: #179bf1;
			transform: translateX(-60%);
		}
	}
	.list {
		position: relative;
		width: 100%;
		background-color: #fff;
		z-index: 1;
		.item {
			width: 100%;
			background-color: #fff;
			border-bottom: 2rpx solid #f7f7f7;
			.itemL {
				flex: 1;
				height: 55rpx;
				line-height: 55rpx;
				font-size: 26rpx;
			}
			.itemR {
				width: 140rpx;
				.delBut {
					margin: 0 auto;
					width: 120rpx;
					height: 55rpx;
					line-height: 55rpx;
					border-radius: 30rpx;
					text-align: center;
					font-size: 26rpx;
					color: #fff;
					background-color: #fd4574;
				}
			}
		}
	}
	.endBut {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: #fff;
		z-index: 2;
		.but {
			margin: 0 auto;
			width: 30%;
			height: 55rpx;
			line-height: 55rpx;
			border-radius: 30rpx;
			text-align: center;
			font-size: 26rpx;
		}
		.custom_btn {
			color: #fff;
			background-color: #3391e6;
		}
		.nodeBut {
			color: #515151;
			background-color: #f0f0f0;
		}
	}
}
.slot_content {
	width: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
	.custom_btn {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #fff;
		background-color: #3391e6;
	}
	.nodeBut {
		color: #515151;
		background-color: #f0f0f0;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	line-height: 90rpx;
	color: #999;
	text-align: center;
	background-color: #f7f7f7;
}
</style>
